<script setup lang="ts">
import { ref, reactive, markRaw } from 'vue'
import { Link, UserFilled } from '@element-plus/icons-vue'

import TitleBar from '@/components/common/TitleBar.vue'
import ItemCard from './ItemCard.vue'
import DateRangeChart from './DateRangeChart.vue'

const totalNumList = reactive([
  { icon: markRaw(Link), number: 650, label1: '昨日', label2: '昨日API调用次数' },
  { icon: markRaw(UserFilled), number: 46, label1: '昨日', label2: '昨日用户数' },
  { icon: markRaw(Link), number: 6694, label1: '本月', label2: '本月API调用次数' },
  { icon: markRaw(UserFilled), number: 2219, label1: '本月', label2: '本月用户数' },
])
</script>

<template>
  <div class="container">
    <title-bar>概况</title-bar>

    <!-- 总数 -->
    <div class="total">
      <template v-for="(item, index) in totalNumList" :key="index">
        <item-card :label1="item.label1" :label2="item.label2" :number="item.number">
          <template #icon>
            <el-icon size="2rem" color="#C8E5FF">
              <component :is="item.icon" />
            </el-icon>
          </template>
        </item-card>
      </template>
    </div>

    <!-- 统计图 -->
    <date-range-chart
      :buttons="['API调用次数', '用户数', '会话数', '平均会话时长（分钟）']"
      :data="{
        date: [
          '01-14周一',
          '01-15周二',
          '01-16周三',
          '01-17周四',
          '01-18周五',
          '01-19周六',
          '01-21周日',
        ],
        value: [300, 354, 200, 458, 135, 60, 336],
      }"
    />
    <div class="bottom-chart">
      <div class="dialogue-quality">
        <title-bar>对话质量</title-bar>
        <date-range-chart
          :buttons="['负面情绪比例', '拦截率']"
          :data="{
            date: [
              '01-14\n周一',
              '01-15\n周二',
              '01-16\n周三',
              '01-17\n周四',
              '01-18\n周五',
              '01-19\n周六',
              '01-21\n周日',
            ],
            value: [300, 354, 200, 458, 135, 60, 336],
          }"
        />
      </div>
      <div class="satisfaction">
        <title-bar>满意度</title-bar>
        <date-range-chart
          :buttons="['投票率', '满意度']"
          :data="{
            date: [
              '01-14\n周一',
              '01-15\n周二',
              '01-16\n周三',
              '01-17\n周四',
              '01-18\n周五',
              '01-19\n周六',
              '01-21\n周日',
            ],
            value: [300, 354, 200, 458, 135, 60, 336],
          }"
        />
      </div>
    </div>
  </div>
</template>
<style scoped>
.container {
  width: 100%;
  background-color: #fff;
}

.total {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

.bottom-chart {
  display: flex;
}

.bottom-chart .dialogue-quality,
.bottom-chart .satisfaction {
  width: 50%;
}
</style>
